<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        第一个vue程序的步骤
        1、引入vue.js
        在head标签中使用script标签进行引入
        2、编写容器
        在body标签中定义一个div标签，改标签主要用来渲染vue程序的
        3、编写vue实例
        vue2的vue实例的创建是通过类式编程方式
        4、进行vue的配置对象的设置
        vue2的写法式基于选项式的编程方式，常见的选项
        el:设置目标挂载点，只有设置了目标挂载点，只有挂载点中才能声明式的渲染内容,
           值为选择器
        data:data中定义的式响应式数据(数据变化，页面会自动更新)
           值有两种情况:1)对象  2）返回
        5、在页面中(目标挂载点中)进行声明式渲染，声明式渲染的常见方式插值表达式
        二、设置目标挂载点有两种方式
        1）通过el属性来设置
        2) vue实例中的$mount的方式来设置: app.$mount("#app")
     -->
     <div id="app">
        <h1>Hello {{message}}</h1>
     </div>
     <script>
        const app=new Vue({
            // el:"#app",
            data:{
                message:"Vue"
            }
        })
        app.$mount("#app")
     </script>
</body>
</html>